<template>
  <div class="drawer_box">
    <div class="btn_box">
      <div
        @click="btnClick(item, index)"
        :class="{ isAtv: isIndex == index }"
        class="itemz flex_center_center"
        v-for="(item, index) in jqArrCv"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div style="width: 90%">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="普管级" name="普管级"></el-tab-pane>
        <el-tab-pane label="严管级" name="严管级"></el-tab-pane>
        <el-tab-pane label="宽管级" name="宽管级"></el-tab-pane>
        <el-tab-pane label="考察级" name="考察级"></el-tab-pane>
      </el-tabs>

      <!-- <div class="input_box">
        <el-select v-model="selectValue" placeholder="监区"  style="width: 200px;margin-right: 90px;">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>

        <el-input v-model="input" style="width: 200px" placeholder="输入姓名" />
        <el-button
          type="primary"
          :icon="Search"
          @click="searchClick"
        ></el-button>
      </div> -->
      <div class="table_box isTable">
        <div style="width: 80%">
          <el-table
            :data="zfTbaleData"
            height="600"
            fit
            highlight-current-row
            stripe
            style="width: 100%"
            border
            @cell-click="cellClick"
          >
            <el-table-column
              type="index"
              width="60"
              align="center"
              label="序号"
            >
            </el-table-column>
            <el-table-column prop="startDate" label="编号" align="center">
              <template #default="scope">
                <div>
                  {{ scope.row.provinceCode }}
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="zcfr" label="姓名" align="center">
              <template #default="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
          </el-table>

          <div class="example-pagination-block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              layout="prev, pager, next,total"
              :total="total"
            />
          </div>
        </div>

        <div class="details_box">
          <div class="info">
            <div class="base-info">
              <el-divider content-position="left">基础信息</el-divider>
              <div class="info-item">
                <p class="lable">
                  姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
                </p>
                <p class="content">{{ criminalInfo.name || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">
                  民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：
                </p>
                <p class="content">{{ criminalInfo.mz || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">
                  年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：
                </p>
                <p class="content">{{ criminalInfo.age || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">
                  性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
                </p>
                <p class="content">{{ criminalInfo.xb || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">身份证号：</p>
                <p class="content">{{ criminalInfo.account || "" }}</p>
              </div>

              <div class="info-item">
                <p class="lable">家庭住址：</p>
                <p class="content">{{ criminalInfo.jtzz || "" }}</p>
              </div>
            </div>
            <div class="criminal-info">
              <el-divider content-position="left">犯罪信息</el-divider>
              <div class="info-item">
                <p class="lable">
                  罪&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
                </p>
                <p class="content">{{ criminalInfo.zm || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">
                  编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
                </p>
                <p class="content">{{ criminalInfo.provinceCode || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">
                  刑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：
                </p>
                <p class="content">{{ criminalInfo.xq || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">入狱时间：</p>
                <p class="content">{{ criminalInfo.qr || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">刑满时间：</p>
                <p class="content">{{ criminalInfo.zr || "" }}</p>
              </div>
              <div class="info-item">
                <p class="lable">处遇等级：</p>
                <p class="content">{{ criminalInfo.cylevel || "" }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/api";
import {
  Search,
  Share,
  Upload,
  TakeawayBox,
  Refresh,
  Collection,
  Plus,
  Loading,
  FolderDelete,
  Back,
} from "@element-plus/icons-vue";
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
  onUnmounted,
} from "vue";
import { defineProps, defineEmits } from "vue";

const selectValue = ref("");

const activeName = ref("普管级");
const props = defineProps({
  sonData: {
    type: String,
    default: "",
  },
  jqArr: {
    type: Array,
    default: [],
  },
});
let input = ref("");
onBeforeMount(() => {
  getCyLevelByType("普管级");
});
const criminalInfo = ref({});
const emit = defineEmits(["childEvent"]);

let zfTbaleData = ref([]);
const sendToParent = () => {
  emit("childEvent", "子组件数据");
};
let dateSfm = ref("");
let hour = ref("");
let daydata = ref("");

const searchClick = () => {};

const cellClick = (row) => {
  getCriminalInfo(row.provinceCode);
};
//罪犯详情
const getCriminalInfo = async (ids) => {
  if (!ids) {
    criminalInfo.value = {};
    return;
  }
  let res = await http.zfpt.CriminalInfoSelect({
    page: 1,
    limit: 10,
    criminalNo: ids,
    name: "",
    state: "",
    jsh: "",
    orgId: "",
    "location": '',
    "joinDate": '',
  });
  if (res && res.code == 0) {
    criminalInfo.value = res.data.data[0] || {};
  }
};
// 获取年月日 时
const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;

  return `${year}-${month}-${day} ${hour.value}`;
};
const getCyLevelByType = async (is) => {
  let res = await http.zfpt.CyLevelSelect({
    page: page.value,
    limit: limit.value,
    orgId: selectValue.value,
    type: is,
    name: input.value,
  });

  if (res && res.code == 0) {
    zfTbaleData.value = res.data.data;
    total.value = res.data.total;
    getCriminalInfo(zfTbaleData.value[0]?.provinceCode || "");
  }
};
const handleClick = (tab) => {
  getCyLevelByType(tab.props.label);
};

let jqArrCv = ref([]);
let isIndex = ref(0);
const btnClick = (item, index) => {
  selectValue.value = item.id;
  isIndex.value = index;
  getCyLevelByType(activeName.value);
};

const total = ref(0);
const page = ref(1);
const limit = ref(10);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  page.value = val;
  getCyLevelByType(activeName.value);
  console.log(`current page: ${val}`);
};

watch(
  () => props.jqArr,
  (newValue, oldValue) => {
    if (newValue) {
      if (props.jqArr) {
        jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr));

        let allJq = jqArrCv.value.map((itz) => itz.id);
        selectValue.value = allJq.join(",");
        let allObj = {
          name: "所有",
          id: allJq.join(","),
        };
        jqArrCv.value.unshift(allObj);
      }
      getFormattedDateTime();
      getCyLevelByType(activeName.value);
    } else {
    }
  },
  {
    deep: true, // 深度监听
    immediate: true, // 立即触发回调
  }
);
</script>

<style scoped lang="scss">
::v-deep .example-pagination-block {
  margin-top: 10px;
  margin-left: 30px;
  .el-pagination.is-background .btn-prev {
    background-color: #34517d3b;
    color: #ffffff;
  }
  .el-pagination.is-background .el-pager li {
    background-color: #34517d3b;
    color: #ffffff;
  }
  .el-pagination.is-background .btn-next {
    background-color: #34517d3b;
    color: #ffffff;
  }
  .el-pagination__total {
    color: #ffffff;
  }
  .el-pager li.is-active {
    background-color: #0768f9d3 !important;
  }
}

.isAtv {
  background-color: rgb(4 110 250 / 27%) !important;
  font-weight: bold;
}
/**
 标签样式修改
 */
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid rgb(5, 112, 146) !important;
}
::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid rgba(48, 104, 121, 0) !important;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  color: white;
  border-left: 1px solid rgb(5, 112, 146) !important;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: rgb(0, 247, 255) !important;
  color: rgb(0, 247, 255);
}



::v-deep .el-divider--horizontal {
  border-top: 1px rgb(5, 112, 146) !important;
}
::v-deep .el-divider__text {
  border: 1px solid rgb(5, 112, 146) !important;
  background-color: transparent;
  color: white;
  font-size: 12px;
  height: 20px;
  line-height: 16px;
}

::v-deep .isTable .el-table {
  background-color: rgb(8, 32, 78) !important;
  .el-table tr {
    background-color: rgb(8, 32, 78) !important;
  }
  .cell {
    height: 30px;
    color: #fff;
    text-align: center;
    // border: 1px solid #ccc;
    background: rgb(8, 32, 78) !important;
    font-size: 12px;
    line-height: 30px;
  }
  .el-table__cell {
    border-color: 1px solid rgb(5, 112, 146);
    padding: 2px 0px !important;
    background: rgb(8, 32, 78) !important;
  }
  .el-table--fit .el-table__inner-wrapper:before {
    display: none !important;
  }
  .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }
  --el-table-border-color: rgb(5, 112, 146);
}
.input_box {
  width: 100%;
  height: 40px;
}
.info {
  flex: 16;
  // display: flex;
  font-size: 14px;
  flex-wrap: wrap;
  color: #fff;
  .info-item {
    height: 40px;
    display: flex;
  }
  .base-info,
  .criminal-info {
    padding: 10px 20px;
    flex: 1;
  }
  .lable {
    width: 80px;
    line-height: 25px;
  }
  .content {
    line-height: 25px;
  }
}

.details_box {
  width: 30%;
  height: 300px;
}
.table_box {
  width: 100%;
  height: 410px;
  display: flex;
}
.drawer_box {
  width: 100%;
  display: flex;
  padding: 0 20px;
  height: 100%;
  box-sizing: border-box;
}
</style>
